<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上海睿雄实业集团有限公司</title>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8a519f133dd19772f8b9987a31d4b236"></script>
</head>

<body>
  <div id="mapContainer" style="width: 100%; height: 400px;"></div>
  <script>
    var map = new AMap.Map('mapContainer', {
      center: ["121.161416", "31.289878"], // 替换为公司的实际经纬度坐标
      zoom: 12
    });





    var marker = new AMap.Marker({
      position: ["121.161416", "31.289878"],// 替换为公司的实际经纬度坐标
      title: "上海睿雄实业集团有限公司"
    });

    marker.setMap(map);
    var infoWindow = new AMap.InfoWindow({
      content: '<div style="padding:0 5px 10px 5px"><h3>上海睿雄实业集团有限公司</h3><button id="navButton">导航到这里</button></div>',
      size: {
        width: 300,
        height: 100
      }
    });
    AMap.event.addListener(map, 'complete', function () {
      infoWindow.open(map, marker.getPosition());
      setTimeout(() => {
        var navButton = document.getElementById('navButton');
        navButton.onclick = function () {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
              console.log(navigator.geolocation, '-------------', '---navButton---------')
              var userPosition = [position.coords.longitude, position.coords.latitude];
              // 规划路线
              AMap.plugin('AMap.Geocoder', function () {
                var geocoder = new AMap.Geocoder({
                  city: "上海" // 公司所在城市
                });
                geocoder.getLocation(userPosition, function (status, result) {
                  if (status == 'complete' && result.info == 'SUCCESS') {
                    var start = result.regeocoder.addressComponent.province + ',' + result.regeocoder.addressComponent.city + ',' + result.regeocoder.addressComponent.district + ',' + result.regeocoder.addressComponent.street + result.regeocoder.addressComponent.number;
                    var end = "上海睿雄实业集团有限公司"; // 终点名称
                    AMap.plugin('AMap.Driving', function () {
                      var driving = new AMap.Driving({
                        map: map
                      });
                      driving.search(start, end, function (status, result) {
                        if (status == 'complete' && result.info == 'SUCCESS') {
                          // 显示路线
                          driving.search(start, end);
                        }
                      });
                    });
                  }
                });
              });
            }, (error) => {
              console.log(error, '---error-----------')
              alert("获取位置信息失败", error);
            })
          } else {
            alert("浏览器不支持地理定位");
          };
        };
      }, 3000)
    });

  </script>
</body>

</html>